<template>
  <div id="app">
   	
   	<tabbar>
   		<tabbar-item selected link="/">
   			<img slot="icon" src="static/1.png" />
   			<span slot="label">首页</span>
   		</tabbar-item>
   		<TabbarItem link="/friends">
   			<img slot="icon" src="static/2.png" />
   			<span slot="label">好友</span>
   		</TabbarItem>
   		<TabbarItem link="/active">
   			<img slot="icon" src="static/3.png" />
   			<span slot="label">动态</span>
   		</TabbarItem>
   		<TabbarItem link="/setting">
   			<img slot="icon" src="static/4.png" />
   			<span slot="label">设置</span>
   		</TabbarItem>
   		
   	</tabbar>
   	
   	
 	
 		<transition :name="aniType">
 			<keep-alive>
   			<router-view></router-view>
   		</keep-alive>
   	</transition>
 	
   	
    
    
    
  </div>
</template>

<script>
	
	import {Tabbar,TabbarItem} from "vux";
	
	export default {
		data:function(){
			return {
				aniType:""
			}
		},
		components:{
			Tabbar,
			TabbarItem
		},
	  watch:{
	  	$route:function(to,from){
	  		var toNum = to.path.split("/").length-1;
	  		var fromNum = from.path.split("/").length-1;
	  		
	  		if(toNum>fromNum){
	  			this.aniType = "pagein";
	  		}else if(toNum<fromNum){
	  			this.aniType = "pageout";
	  		}else{
	  			this.aniType = "";
	  		}
	  		
	  	}
	  }
	}
</script>

<style scoped>
	
	.pagein-enter{
		transform: translate(100%,0);
		position: absolute;
	}
	
	.pagein-enter-active{
		transition: all 0.7s;
		position: absolute;
	}
	
	.pagein-leave-active{
		transform: translate(-50%,0);
		transition: all 0.7s;
		position: absolute;
	}
	
	
	.pageout-enter{
		transform: translate(-50%,0);
		position: absolute;
	}
	
	.pageout-enter-active{
		transition: all 0.7s;
		position: absolute;
		z-index: 5;
	}
	
	.pageout-leave-active{
		transform: translate(100%,0);
		transition: all 0.7s;
		position: absolute;
		z-index: 10;
	}

</style>
